<template>
  <div class="container">
    <!-- 上面表单搜索 -->
    <!-- 上面表单搜索 -->
    <el-form :model="queryData" label-width="120">
      <el-row :gutter="20">
        <el-col span="4">
          <el-form-item label="角色名称">
            <el-input v-model="queryData.name" placeholder="请输入角色名称" />
          </el-form-item>
        </el-col>
        <el-col span="4">
          <el-form-item label="状态">
            <el-select v-model="queryData.status" style="width: 100%" placeholder="请选择状态">
              <el-option label="正常" value="0" />
              <el-option label="禁用" value="1" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col span="4">
          <el-button type="primary" style="margin-right: 10px" @click="queryHandler">搜索</el-button>
          <el-button type="primary" @click="resetFields">重置</el-button>
        </el-col>
      </el-row>
    </el-form>
    <div style="display: flex; flex-direction: row; justify-content: flex-end; margin: 20px 0">
      <el-button type="primary" @click="addNewHandler">新增</el-button>
    </div>
    <!-- 表格区域 -->
    <el-table :data="tableData" border style="width: 100%" row-key="id">
      <el-table-column type="index" width="50"></el-table-column>
      <el-table-column prop="name" label="角色名称" width="120" />
      <el-table-column prop="status" label="状态" width="100">
        <template #default="scope">
            <el-switch v-model="scope.row.status" @change="changeStatusHandler($event, scope.row)" :active-value="0" :inactive-value="1" />
        </template>
      </el-table-column>
      <el-table-column prop="description" label="描述" />
      <el-table-column prop="createdAt" label="创建时间" width="180">
        <template #default="scope">
          {{ formatDateStr(scope.row.createdAt, true) }}
        </template>
      </el-table-column>
      <el-table-column prop="updatedAt" label="更新时间" width="180">
        <template #default="scope">
          {{ formatDateStr(scope.row.updatedAt, true) }}
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" min-width="120" align="center">
        <template #default="scope">
          <el-button link size="small" type="primary" icon="Edit" @click="editRowHandler(scope.row)">修改</el-button>
          <el-button link size="small" type="danger" icon="Delete" @click="deleteRowHandler(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 角色 -->
    <RoleDialog ref="roleDialogRef" @uploadTable="initTableData"></RoleDialog>
  </div>
</template>

<script setup>
import * as RoleService from '@/api/system/role'
import { onMounted } from 'vue'
import RoleDialog from './components/RoleDialog'
import { formatDate } from '@/utils/date'
import {ElMessageBox} from 'element-plus';
const formatDateStr = (data, isDue) => formatDate(data, isDue)

const tableData = ref([])
const tableTotal = ref(0)
const pageSizeRef = ref(10)
const pageNumberRef = ref(1)
// 搜索
const queryData = ref({
  name:'',
  status:''
})
const queryHandler = () => {
  initTableData(queryData.value)
}
const resetFields = () => {
  queryData.value = {
    name:'',
    status:''
  }
  initTableData();
}
// 初始化表格数据
const initTableData = async (queryData = {}) => {
  const { result } = await RoleService.getPageApi({
    ...queryData,
    pageSize: pageSizeRef.value,
    pageNumber: pageNumberRef.value,
  })
  tableData.value = result.data ?? []
  tableTotal.value = result?.total ?? 0
}
const changePageHandler = ({ page, limit }) => {
  pageSizeRef.value = limit
  pageNumberRef.value = page
  initTableData()
}
// 新增
const roleDialogRef = ref(null)
const addNewHandler = async () => {
  roleDialogRef.value.openDialog()
}
// 修改状态
const changeStatusHandler = async (value, rowData) => {
  if (rowData.id) {
    await RoleService.modifyStatusByIdApi(rowData.id)
    initTableData()
  }
}
// 编辑操作
const editRowHandler = async (rowData) => {
  roleDialogRef.value.openDialog(rowData)
}
// 删除操作
const deleteRowHandler = (rowData) => {
  ElMessageBox.confirm('确定要删除', '删除提示', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(async () => {
    await RoleService.deleteByIdApi(rowData.id)
    ElMessage.success('删除成功')
    initTableData()
  })
}
onMounted(() => {
  initTableData()
})
</script>

<style lang="scss" scoped>
.container {
  padding: 20px;
  box-sizing: border-box;
}
</style>
